<template>
  <el-row class="header" justify="space-between">
    <div class="logo" @click="navigateToHome" >
      <img src="../../../assets/icons/mylogo.png" alt="logo"/>
      <span style="font-size: 28px">求职招聘管理系统</span>
    </div>
    <div class="user-info">
      <el-button @click="mianPreview" style="margin-right: 10px">前台预览</el-button>
        <img  :src="data.avatar" @error="data.avatar=defaultAvatar" alt="" style="width: 30px; height: 30px; border-radius: 50%;">
      <span>管理员<span style="color: #f81616;font-weight: bold">{{data.user}}</span></span>
      <el-link type="primary" @click="adminExit">退出</el-link>
    </div>
  </el-row>
</template>

<script setup>
// export default {};
import {reactive} from "vue";
import  defaultAvatar  from "@/assets/icons/defaultAvatar.png"

const data = reactive({
  user: localStorage.getItem('admin_user_name'),
  avatar:localStorage.getItem('admin_user_avatar'),
})
const adminExit = () => {
  localStorage.removeItem('admin_user_name')
  localStorage.removeItem('admin_user_id')
  localStorage.removeItem('admin_user_token')
  localStorage.removeItem('admin_user_avatar')
  window.location.href = '/admin/login'
}
const mianPreview = () => {
  window.open('http://localhost:8080/')
}
const navigateToHome = () => {
  // 这里可以使用 Vue Router 的方法来导航到首页，假设首页的路由名称为 'home'
  // 确保你已经引入了 useRouter 并正确配置了路由
  // import { useRouter } from 'vue-router';
  // const router = useRouter();
  // router.push({ name: 'home' });

  // 如果是基于 hash 模式或者直接使用 href，可以这样：
  window.location.href = '/admin'; // 或者具体的首页路径
};
</script>

<style scoped>
.header {
  padding: 2px 24px;
  background-color: #ffffff;
  border-bottom: 5px solid #F0F2F5;
}

.logo {
  display: flex;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}

.logo img {
  width: 40px;
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info span {
  margin: 0 10px;
}
</style>
